{% extends 'main.html' %}
{% block title%}知道{% endblock %}
{% block isactive %}active{% endblock %}
{% block html%}
<div id="tranlationcontainer" class="container">
    <ul class="nav nav-tabs navbar-light bg-light">
  <li class="nav-item" role="presentation">
    <a class="atab nav-link active" aria-current="page" href="#" id="knowledgeWiki" aria-controls="contentWiki" role="tab" data-bs-toggle="tab" data-bs-target="#contentWiki" aria-selected="true">Wiki</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="atab nav-link" href="#" id="knowledgeUrl" aria-controls="contentUrl" role="tab" data-bs-toggle="tab" data-bs-target="#contentUrl" aria-selected="false">URL</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="atab nav-link" href="#" id="knowledgeGoogle" aria-controls="contentGoogle" role="tab" data-bs-toggle="tab" data-bs-target="#contentGoogle" aria-selected="false">gogo</a>
  </li>
</ul>
    <div class="alert alert-info" role="alert">
      <h7 class="alert-heading">
      本网站功能仅用作学习与交流，请遵守当地法律法规，合法上网。</h7>
    </div>
    <div id="contentWiki" class="tab-pane fade show active" role="tabpanel" aria-labelledby="knowledgeWiki" tabindex="0">
        <form class="d-flex" role="search" id="wikiform" name="wikiform" onkeydown="if(event.keyCode==13)return false;">{% csrf_token %}
            <div class="asearch input-group" a-label="knowledgeWiki">
            	<button class="btn btn-outline-success" type="button" id="wikienbutton">英文</button>
                <button class="btn btn-outline-success" type="button" id="wikibutton">中文</button>
                <input class="form-control" type="search" placeholder="input something" aria-label="search" id="wikisearch" name="somewhat">
            </div>
        </form>
        <div id="outputwiki" class="row"></div>
    </div>
    <div id="contentUrl" class="tab-pane fade" role="tabpanel" aria-labelledby="knowledgeUrl" tabindex="0">
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" id="original" name="urldomain" value="" checked>
            <label class="form-check-label" for="original">原url</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" id="googlehk" name="urldomain" value="https://www.google.com.hk">
            <label class="form-check-label" for="googlehk">www.google.com.hk</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" id="google" name="urldomain" value="https://www.google.com">
            <label class="form-check-label" for="google">www.google.com</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" id="wikizh" name="urldomain" value="https://zh.wikipedia.com">
            <label class="form-check-label" for="google">zh.wikipedia.com</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" id="wikien" name="urldomain" value="https://en.wikipedia.com">
            <label class="form-check-label" for="google">en.wikipedia.com</label>
        </div>
        <form class="d-flex" role="search" id="urlform" name="urlform" onkeydown="if(event.keyCode==13)return false;">{% csrf_token %}
            <div class="asearch input-group" a-label="knowledgeUrl">
                <button class="btn btn-outline-secondary" type="button" id="urlbutton">Url</button>
                <input class="form-control" type="search" placeholder="input url" aria-label="search" id="urlsearch" name="somewhat">
            </div>
        </form>
        <div id="outputurlWraper">
            <!-- Button trigger modal -->
<button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#exampleModal" style="display: inline-block;">
  查看网页
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><img style="width:45px;height:45px;" src="/static/bootstrap-icons-1.9.1/filetype-html.svg" alt="网页内容"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
            <div id="outputurl" class="row">
                当此段文字出现时，请先在url栏输入正确的网址，点击按钮【url】待程序执行完后再点击【查看网页】
                <img src="/static/image/2022-08-12-18354400.webp" class="card-img-top" alt="...">
            </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
            <div id="outputurl_____" class="row">
            </div>
        </div>
    </div>
    <div id="contentGoogle" class="tab-pane fade" role="tabpanel" aria-labelledby="knowledgeGoogle" tabindex="0">
        <form class="d-flex" role="search" id="googleform" name="googleform" onkeydown="if(event.keyCode==13)return false;">{% csrf_token %}
            <div class="asearch input-group" a-label="knowledgeGoogle">
                <button class="btn btn-outline-success" type="button" id="googleenbutton">go英</button>
                <button class="btn btn-outline-success" type="button" id="googlehkbutton">go中</button>
                <input class="form-control" type="search" placeholder="input something" aria-label="search" id="googlesearch" name="somewhat">
            </div>
        </form>
        <div id="outputgoogle" class="row"></div>
    </div>
    <br/>
</div>
{% endblock %}
{% block javascript%}
<script type="text/javascript">
    /**
     * 给按钮添加提交事件
     */
    function addClickSubmitForButton(buttonId,urlStr,formId,outputDivId,validationFun,callbackFun){
        $("#"+buttonId).click(function(){
            if(validationFun != ""){
                if(!validationFun()){
                    return false;
                }
            }
            $("#loading").css("display","");
            $.ajax({
                type:"POST",
                url:urlStr,
                data:$("#"+formId).serialize(),
                async:true,
                error:function(request){
                        console.log("error");
                },
                success:function(result){
                    $("#"+outputDivId).empty();
                    $("#"+outputDivId).append(result.content);
                    if(callbackFun != ""){
                        callbackFun(result.content);
                    }
                },
                complete:function(){
                    $("#loading").css("display","none");
                }
            });
        });
    }
    /**
     * url格式是否正确 
     */
    function isUrl(str){
        var v = new RegExp('^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00auffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$','i');
        return v.test(str);
    }
   const myModalAlternative = new bootstrap.Modal('#alertmodal');
   const myModalEl = document.getElementById('alertmodal');
    /**
     * 校验url
     */
    function validationUrl(){
        _url = $("#urlsearch").val();
        if(_url==""){
            myModalEl.addEventListener('shown.bs.modal', event => {
                $("#alertmodalbody").html("<p>请输入url</p>");
            });
            myModalAlternative.show();//alert("请输入url");
            return false;
        }
        domaintype = $("input[name=urldomain]:checked").val();
        if(domaintype != ""){
            _url = _url.replace(/http[s]?:\/\/[\w\d]+(\.[\w\d]+)*(:\d+)*/i,domaintype);
            $("#urlsearch").val(_url);
        }
        if(!isUrl(_url)){
            myModalEl.addEventListener('shown.bs.modal', event => {
                $("#alertmodalbody").html("<p>url格式错误，请重新输入</p>");
            });
            myModalAlternative.show();//alert("url格式错误，请重新输入");
            return false;
        }
        return true;
    }
    /**
     * gogo返回的html需要特殊处理后才能比较好的显示......
     */
    function specialGoogleReturnHtml(returnHtml){
        $("#outputgoogle").empty();
        $("#outputgoogle").append(returnHtml.replace('a:visited{color:#681da8}',''));
        $("div[jscontroller='EufiNb']").attr("style","display:none");
        $("#searchform").attr("style","display:none");
        return true;
    }
    
    $(function(){
        /**
         *隐藏其他搜索栏 保证搜索栏位置统一 
        **/
        $(".atab").click(function(){
            parentObj = $(this);
            //console.log(12345);
            $(".tab-pane").each(function(index,element){
                if(parentObj.attr('id')!=$(element).attr('aria-labelledby')){
                    $(element).attr('style','display:none');
                }else{
                    $(element).attr('style','display:block');
                }
            });
        });

        addClickSubmitForButton("wikibutton","wikizh/","wikiform","outputwiki","","");
        addClickSubmitForButton("wikienbutton","wikien/","wikiform","outputwiki","","");
        addClickSubmitForButton("urlbutton","oneurl/","urlform","outputurl",validationUrl,"");
        addClickSubmitForButton("googlehkbutton","googlehk/","googleform","outputgoogle","",specialGoogleReturnHtml);
        addClickSubmitForButton("googleenbutton","googleen/","googleform","outputgoogle","",specialGoogleReturnHtml);

    });

</script>
{% endblock %}
